<template>
  <el-select
    placeholder="选择场次"
    :style="customStyle"
    @change="changeInterval"
    :value="interval_time"
    :disabled="disabled"
  >
    <el-option v-for="item in timeOptions" :key="item" :label="item" :value="item"> </el-option>
  </el-select>
</template>

<script>
export default {
  name: 'TimeSelect',
  props: {
    customStyle: {
      type: String,
      default: 'width: 160px; margin-right: 10px'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ''
      // required: true
    }
  },
  data() {
    return {}
  },

  computed: {
    interval_time: {
      get() {
        return this.value // 从父组件接收的值
      },
      set(newValue) {
        this.$emit('input', newValue) // 触发 input 事件更新父组件的值
      }
    },
    timeOptions() {
      const startTime = new Date()
      startTime.setHours(7, 0, 0) // 设置开始时间为 07:00

      const endTime = new Date()
      endTime.setHours(18, 30, 0) // 设置结束时间为 18:30

      const interval = 30 // 间隔分钟数

      const timeArray = []
      let currentTime = new Date(startTime)

      while (currentTime <= endTime) {
        const formattedTime = currentTime.toLocaleTimeString('en-US', {
          hour12: false,
          hour: '2-digit',
          minute: '2-digit'
        })
        timeArray.push(formattedTime)

        currentTime.setMinutes(currentTime.getMinutes() + interval)
      }
      return ['00:00', ...timeArray]
    }
  },
  methods: {
    /**
     * @description: 选择时间
     * @return {*}
     */
    changeInterval(e) {
      this.interval_time = e
      this.$emit('changeInterval', e)
    }
  }
}
</script>
<style scoped lang="less">
.page-title {
  margin: 10px auto;
  &-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h2 {
      position: relative;
      padding-left: 10px;
      margin: 0;
      &::before {
        content: '';
        width: 4px;
        height: 20px;
        background-color: #718aeb;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
      }
    }
  }
  .el-divider--horizontal {
    margin: 20px 0;
  }
}
</style>
